---
title: <SignedIn />
---

The `<SignedIn />` component conditionally renders its child components based on whether a user is authenticated.

Use it to display content only visible to logged-in users.

## Usage

Basic usage example:

```tsx
import { SignedIn } from "@daveyplate/better-auth-ui"

export default function UserDashboard() {
    return (
        <SignedIn>
            <p>
                Only signed-in users will see this!
            </p>
        </SignedIn>
    )
}
```

## Example

Here's an example demonstrating `<SignedIn />` in a practical scenario:

```tsx
import { SignedIn, SignedOut, UserButton } from "@daveyplate/better-auth-ui"

export default function Navbar() {
    return (
        <nav className="h-16 flex justify-between items-center px-4">
            <Link href="/">
                Home
            </Link>

            <SignedIn>
                <UserButton />
            </SignedIn>

            <SignedOut>
                <Link href="/auth/sign-in">
                    Sign In
                </Link>
            </SignedOut>
        </nav>
    )
}
```

In this example, the [`<UserButton />`](/components/user-button) component is displayed only if the user has an active session. Otherwise, visitors are prompted with a sign-in link.